选择Dropbox网盘文件-Chooser API

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

选择Dropbox网盘中的文件。

Chooser API

Chooser

步骤

1. 创建Dropbox账号

创建Dropbox账号，上传一些文件。

2. 创建应用

在应用创建页面上创建应用，获取App key和App secret，使用Chooser只需要App key。

具体步骤：Choose an API –> Full Dropbox– Access to all files and folders in a user’s Dropbox. –> Name your app –> Create app。

注意app名称不要带有Dropbox等字眼，具体规则看Developer branding guide。

创建成功后会自动跳转到应用控制台，显示所需要的App key和其他配置项。需要对Chooser / Saver / Embedder domains进行配置，添加使用Chooser API的网站域名。

3. 使用

加载sdk（data-app-key要替换成应用的App key）：

1
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="YOU_APP_KEY"></script>

自定义触发

打开Dropbox文件选择弹窗：

1
window.Dropbox.choose(options);

options配置项说明查看Chooser。

1
2
3
4
5
6
7
8
9
10
11
12
const options = {
    success: function(files) {    
        console.log('选择的文件', files)
    },
    cancel: function() {
        console.log('取消弹窗')
    },
    linkType: "direct", // "direct"直接返回文件资源链接，"preview"返回文件分享页链接
    multiselect: true, // true支持多选
    extensions: ['.png', '.jpg', '.jpeg'], // 限制只能选择png和jpg类型的图片
    folderselect: false, // 是否可以选择文件夹，linkType为"direct"的时候不能设置为true
};

返回的文件数据：

1
2
3
4
5
6
7
8
9
10
{
    "id": "id:WpAf-GzjCZgAAAAAAAAADw",
    "name": "18071524.jpeg",
    "bytes": 45853,
    "isDir": false,
    "link": "https://dl.dropboxusercontent.com/1/view/vskds5y4eqav5mh/18071524.jpeg",
    "linkType": "direct",
    "icon": "https://www.dropbox.com/static/images/icons64/page_white_picture.png",
    "thumbnailLink": "https://ucdce874f44aecc28a15acffe249.previews.dropboxusercontent.com/p/thumb/ABn6sMa1daeLW-siy1ee4zAws08Bp1aZG-9iuecGznEeDJkRmDMFFdEsiXS-wEVNE-UN5o7lFq0Ny2UxmHcJz7cIMoc0HWBOrAe5FbcfvIApoYH_CQXEDTGT1Fi-5sZzWkU6rheGzgJGFFto6VlQIAYZDNtPVdfAf_gF0HDVMcvEpSxRxQ7z4irCWwifqiM0PACLCQYg14B0ENjWaaGRIw2m3Aip4Cez-NwYUBz7sZOOrV6AEibPeVPmRUD5LLYvCn7b6FNHC1QktsgIDmFgaCDY9l5v2J-pO6viDp9phgXycS7xJCeZQPUvzGI3SNdkkzA48EvYJchup1weDvM8QYt3fbeXBT12WmQGtdDfLm4RFfBddNOcWP6UfSswjTwB_yE/p.jpeg?bounding_box=75&mode=fit"
}

使用官方触发按钮

1
2
var button = Dropbox.createChooseButton(options);
document.getElementById("container").appendChild(button);

其他

应该使用哪个API

https://www.dropbox.com/developers/support

如果您正在为应用寻找 UI 组件，以便其他人在您的应用中打开 Dropbox 中的文件或从您的应用中将文件保存到 Dropbox，请使用Chooser和Saver

如果您需要基于HTTP的API（例如需要面向服务器端 Web 应用），或者需要更低级别的Dropbox访问权限，请使用User API

如果您需要访问Dropbox Business管理功能，请使用Dropbox Business API